<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
	<meta name="author" content="Kamly">
	<title>导航</title>
	<link rel="stylesheet" type="text/css" href="css/normal.css" />
	<link rel="stylesheet" type="text/css" href="css/html5.css" />
	<link rel="stylesheet" type="text/css" href="css/base.css" />


	<link rel="stylesheet" type="text/css" href="css/form.css" />
	<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="css/nav.css" />
	<link rel="stylesheet" type="text/css" href="css/msgout.css" />
	<link rel="stylesheet" type="text/css" href="css/grid.css" />
	



	<script  src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
</head>
<body>
	
	<!-- 遮罩层 侧边栏1-->
	<div style="display: none;" class="mark-b"></div>
	<div class="slidebar">
		<div class="btn-home">
			<span class="title-s">返回</span>
			<i class="ui-icon-home icon48 icon-orang"></i>
		</div>
		<ul class="menu">
			<li><a href="#">1sadaddafsfsff</a></li>
			<li><a href="#">2fadf</a></li>
			<li><a href="#">3aaaaaaaaaa</a></li>
		</ul>
	</div>



	<!--  导航栏 1    -->
	<div class="nav">
        <nav>
        	<a href="">123</a>
        </nav>
        <nav>
        	<a href="">sadd</a>
        </nav>
        <nav>
        	<a href="">4645</a>
        </nav>
        <nav>
        	<a href="">qw</a>
        </nav>
        <nav>
        	<a href="">adsd</a>
        </nav>
    </div>
	

	<!--  侧边栏 2   jq动态设置 menu-flag -->
	<br/>
	<br/>
	<ul class="paper menu" >
        <li class="menu-flag">
            <a href="#">asd</a>
            <ul class="paper menu">
                <li ><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
            </ul>
        </li>
        <li>
            <a href="#">dddddd</a>
            <ul class="paper menu">
                <li>
                    <a href="#">zxcxzc</a>
                    <ul class="paper menu">
                        <li>
                            <a href="#">zxcxzc</a>
                            <ul class="paper menu">
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">qwf</a></li>
                        <li><a href="#">cvvf</a></li>
                    </ul>
                </li>
                <li><a href="#">qwf</a></li>
                <li><a href="#">cvvf</a></li>
            </ul>
        </li>
        <li><a href="#">zxcxzc</a></li>
        <li><a href="#">qwf</a></li>
        <li><a href="#">cvvf</a>
            <ul class="paper menu">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
            </ul>
        </li>
    </ul>

	<!--  导航栏 2   -->
	<div class="menu2">
		<ul>
			<li>
				<a href="#">
					<span class="out">首 页</span>
					<span  class="over">首 页</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="out">预报预警</span>
					<span class="over">预报预警</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="out">气象新闻</span>
					<span class="over">气象新闻</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="out">气象服务</span>
					<span class="over">气象服务</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="out">行政审批</span>
					<span class="over">行政审批</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="out">信息公开</span>
					<span class="over">信息公开</span>
				</a>
			</li>
			<li>
				<a href="#">
					<span class="out">气象科普</span>
					<span class="over">气象科普</span>
				</a>
			</li>
		    <li>
		    	<a href="#">
		    		<span class="out">党风廉政</span>
		    		<span class="over">党风廉政</span>
		    	</a>
		    </li>
			<li>
				<a href="#">
					<span class="out">气象科普</span>
					<span class="over">气象科普</span>
				</a>
			</li>
		</ul>
		<div class="cls"></div>
	</div>

	<!-- 图标 + 列表 -->
	<div class="menu-f">
		<div class="ui-btn-round">
			<i class="ui-icon-home icon48 icon-orang"></i>
		</div>
		<ul style="display: none;" class="paper menu m16">
			<li><a href="#">asd</a></li>
			<li><a href="#">dddddd</a></li>
			<li><a href="#">zxcxzc</a></li>
			<li><a href="#">qwf</a></li>
			<li><a href="#">cvvf</a></li>
		</ul>
	</div>

<div class="ui-grid-container">
	<div class="ui-row ">
		<div class="ui-col-xs-12  ta-c mt24 article">
			<h2>约战</h2>
			<div class="ui-col-xs-12">
				<form id="infoFrom">
					<input type="hidden" name="openid" value="{$openid}">
					<input type="text" id="name" name="name" class="input-down ta-c" maxlength="15" placeholder="应邀者姓名">
				</form>
			</div> 
			<div class="ui-btn ui-btn-large mt24" id="btn" >邀请</div>
		</div>

		<div class="ui-col-xs-12  ta-c mt24 article">
			<table class="table table-bordered table-striped">
				<thead>
				<tr>
					<th>邀请人</th>
					<th>被邀请人</th>
					<th>验证码</th>
				</tr>
				</thead>
				<tbody>
				<foreach name='battleRecordResults' item='battleRecordResult'>
					<tr>
						<td>{$battleRecordResult['challengername']}</td>
						<td>{$battleRecordResult['invitedname']}</td>
						<if condition="($battleRecordResult['qrcode'] eq 0)">
							<td>达成战约</td>
							<else />
							<td>{$battleRecordResult['qrcode']}</td>
						</if>
					</tr>
				</foreach>
				</tbody>
			</table>
		</div>
	</div>
</div>

    <script type="text/javascript">

	    /*
		 *  导航栏2
	    */
		$(".menu2 li a").hover(function() {
			$(".out",	this).stop().animate({'top':	'48px'},	300); // move down - hide
			$(".over",	this).stop().animate({'top':	'0px'},		300); // move down - show

		}, function() {
			$(".out",	this).stop().animate({'top':	'0px'},		300); // move up - show
			$(".over",	this).stop().animate({'top':	'-48px'},	300); // move up - hide
		});



        //  遮罩层 侧边栏 1 
        $(".mark-b").click(function() {
            $(this).fadeOut(300);  //  退出
            menu_f_out();  //  退出
            slidebar_out();  //  退出
        })
        $(".slidebar>.btn-home").click(function() {
            $(this).parent().toggleClass("slidebar-toggle");  //  切换
            $(".mark-b").fadeToggle(300);  // 切换
        })
        function menu_f_out() {
            $(".menu-f").children("ul").fadeOut(300);
        }
        function slidebar_out() {
            $(".slidebar").removeClass("slidebar-toggle");

            if ($(window).width() < 768)
                $("#nav-switch").siblings().slideToggle(300);
        }

        // 图标 + 列表
        $(".menu-f").click(function() {
            $(this).children("ul").fadeIn(300);
            $(".mark-b").fadeIn(300);
        })

    </script>
</body>
</html>